<script setup lang="ts">
import ViewContainer from "@/layouts/ViewContainer.vue";
import titleConfig from "./delivery.title";
import Form from "@/components/StorageForm/index";
import List from "@/components/List/index.vue";
import { deliveryService } from "@/service/delivery";
import MissingTag from "@/components/MissingTag/index.vue";
import { useScanStore, useToastStore } from "@/store";
import { flightStatusTextMap } from "@/common/map";
import { useMessage } from "wot-design-uni";

const message = useMessage();

const SCAN_STORE_ID = "DELIVERY_SCAN";

const scanStore = useScanStore();
const toastStore = useToastStore();

const Row = Form.CommonRow;

const tabOptions = [
	{
		label: "全部",
		value: "all",
	},
	{
		label: "待提货",
		value: "WAIT_DELIVERY_PICK_UP",
	},
	{
		label: "待拆板",
		value: "BOARD_TO_REMOVED",
	},
];

const searchValue = ref();
const tab = ref("all");

const listRef = ref(null);

const defaultParams = reactive({
	mainOrderNumber: "",
	mainOrderStatus: "all",
});

const getRowConfig = (data) => {
	return [
		{
			label: "主单号",
			value: data?.mainOrderNumber,
		},
		{
			label: "航班号",
			value: data?.flightNumberList?.join(","),
		},
		{
			label: "总箱数",
			value: data?.boxQuantity,
		},
		{
			label: "总重",
			value: data?.weight,
		},
		{
			label: "状态",
			value: flightStatusTextMap[data?.mainOrderStatus],
		},
	];
};

const handleSearch = () => {
	defaultParams.mainOrderNumber = searchValue.value;
};
const handleChangeTab = (v) => {
	const _v = tabOptions[v.index]?.value;
	if (defaultParams.mainOrderStatus === _v) {
		return;
	}
	defaultParams.mainOrderStatus = _v;
};

// 开始清点
const handleCheck = (mainOrderNumber) => {
	uni.navigateTo({
		url: `/pages/startCheck/index?mainOrderNumber=${mainOrderNumber}`,
	});
};
// 缺件登记
const handleRegister = (mainOrderNumber) => {
	uni.navigateTo({
		url: `/pages/missingRegister/index?mainOrderNumber=${mainOrderNumber}`,
	});
};
// 确认提货
const handleDelivery = async (id) => {
	const rs = await deliveryService.pickUp({ id });
	if (rs) {
		// await message.alert("提货成功");
		toastStore.set("提货成功", "success");
		listRef.value?.reload?.();
	}
};
// 扫码提货
const handleScan = () => {
	uni.navigateTo({ url: `/pages/scan/index?id=${SCAN_STORE_ID}` });
};

watch(
	() => scanStore.get(SCAN_STORE_ID),
	(val) => {
		console.log("val:", val);
		/* TODO: 处理扫码提货逻辑 */
	},
);

onReachBottom(() => { });
</script>

<template>
	<ViewContainer :title="titleConfig" innerClass="outbound-page">
		<template #titleRight>
			<view class="scan" @click="handleScan">扫码提货</view>
		</template>
		<view class="search" id="search-bar">
			<wd-search v-model="searchValue" placeholder="输入主单号搜索">
				<template #suffix>
					<wd-button class="search-btn" :round="false" @click="handleSearch">搜索</wd-button>
				</template>
			</wd-search>
			<wd-tabs :modelValue="tab" @change="handleChangeTab">
				<block v-for="item in tabOptions" :key="item.value">
					<wd-tab :title="item.label"> </wd-tab>
				</block>
			</wd-tabs>
		</view>

		<view class="outer-divider"></view>

		<List ref="listRef" :fetchMehod="deliveryService.getList" :defaultParams="defaultParams">
			<template #listItem="props">
				<Row :config="getRowConfig(props.data)" :type="'show'">
					<template #extra>
						<view class="button-group">
							<template v-if="props.data?.mainOrderStatus === 'WAIT_DELIVERY_PICK_UP'">
								<wd-button @click="() => handleRegister(props.data?.mainOrderNumber)"
									:round="false">缺件登记</wd-button>
							</template>
							<template v-if="props.data?.mainOrderStatus === 'WAIT_DELIVERY_PICK_UP'">
								<wd-button @click="() => handleDelivery(props.data?.id)" :round="false">清点提货</wd-button>
							</template>
							<template v-if="props.data?.mainOrderStatus === 'BOARD_TO_REMOVED'">
								<wd-button @click="() => handleCheck(props.data?.mainOrderNumber)"
									:round="false">开始清点</wd-button>
							</template>
						</view>

						<!-- TODO: 缺件标签 -->
						<template v-if="(props.data?.goodsLackStatus === 'WAIT_PROCESS' || props.data?.goodsLackStatus === 'FINISH_PROCESS') &&
							props.data?.mainOrderStatus === 'BOARD_REMOVAL_COMPLETED'">
							<view class=" missing-tag-wrap">
								<MissingTag :status="props.data?.goodsLackStatus === 'WAIT_PROCESS'
										? 'error'
										: 'success'
									" />
							</view>
						</template>
					</template>
				</Row>
				<div class="divider"></div>
			</template>
		</List>
	</ViewContainer>
</template>

<style lang="less" scoped>
.scan {
	color: #5aabfc;
	font-size: 33px;
	margin-right: 20px;
}

.divider {
	width: 100%;
	height: 40px;
}

.search {
	width: 100%;
	position: fixed;
	left: 0;
	z-index: 100;
	transform: translateY(-30px);
}

.search-btn {
	width: 150px;
	margin: 0 20px;
}

.outer-divider {
	width: 100%;
	height: 220px;
}

.button-group {
	display: flex;
	justify-content: flex-end;

	.wd-button {
		margin: 0;
		width: 200px;

		&:first-child {
			margin-right: 20px;
		}
	}
}

.missing-tag-wrap {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}
</style>
